<template>
  <div>
    <tableComponents :pagination="{ currentPage, pageSize, total: list.all_num }" @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange" @sendUserSearch="getSearch" :searchData="userSearchData" :isHaveExport="false" :isHaveAdd="false">
      <template v-slot:table>
        <el-table ref="multipleTable" :data="list.data" stripe v-loading="loading" header-row-class-name="head_color" tooltip-effect="dark"
            style="width: 99.8%">
          <el-table-column label="会员" min-width="100" align="center">
            <template slot-scope="scope">
              <div class="tc">
                <img style="width:50px;height:50px" :src="$fnc.getImgUrl(scope.row.avatar)" class="user_img" />
                <span>{{ scope.row.rating_cn }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="会员信息" min-width="160">
            <template slot-scope="scope">
              <div class="user_table">
                <span>用户昵称：</span>
                <small>{{ scope.row.nickname || "----" }}</small>
                <br />
                <span>会员账号：</span>
                <small>{{ scope.row.username }}</small>
                <br />
                <span>推荐人：</span>
                <small>{{ scope.row.tid_cn }}</small>
                <br />
                <!-- <span>推荐码：</span>
                <small>{{ scope.row.share }}</small>
                <br /> -->
                <span v-if="scope.row.shop_title != ''">店铺名称：</span>
                <small v-if="scope.row.shop_title != ''">{{
                  scope.row.shop_title
                }}</small>
                <br v-if="scope.row.shop_title != ''" />
                <span>注册时间：</span>
                <small>{{ scope.row.created_time | getTimeFormat }}</small>
                <br />
                <span>备注：</span>
                <small>{{ scope.row.shop_remark || "---" }}</small>
                <br />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="统计" min-width="100">
            <template slot-scope="scope">
              <div v-for="(item, i) in scope.row.reward_ar.slice(0, -1)" :key="i" class="user_table">
                <span>{{ item.title }}：</span>
                <small>{{ item.value | toFixedNum }}</small>
                <br />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="下级会员数" min-width="150">
            <template slot-scope="scope">
              <div class="user_table">
                <span>直推/分销：</span>
                <small>{{ scope.row.ynumber }} / {{ scope.row.yvip }}</small>
                <br />
                <span>累计消费：</span>
                <small>{{ scope.row.buy | toFixedNum }}</small>
                <br />
                <span>累计佣金：</span>
                <small>{{ scope.row.sum_amount | toFixedNum }}</small>
                <br />
                <div class="user_table">
                  <span>累计货款：</span>
                  <small>{{ scope.row.goods_money | toFixedNum }}</small>
                  <br />
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="商务数据" min-width="150">
            <template slot-scope="scope">
              <div class="user_table">
                <span>订单数：</span>
                <small>{{ scope.row.s_order_num }}</small>
                <br />
                <span>销售额：</span>
                <small>{{ scope.row.s_sales | toFixedNum }}</small>
                <br />
                <span>已结算：</span>
                <small>{{ scope.row.s_settled | toFixedNum }}</small>
                <br />
                <span>未结算：</span>
                <small>{{ scope.row.s_unsettled | toFixedNum }}</small>
                <br />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="200">
            <template slot-scope="scope">
              <el-row class="myblank">
                <el-button :loading="$store.state.isLoading" size="mini" @click="getUserInfo(scope.row.id)" type="primary">详情</el-button>
                <el-button :loading="$store.state.isLoading" size="mini" @click="
                    showSupplierDialog(
                      scope.row.id,
                      scope.row.username,
                      scope.row.name,
                      scope.row.shop_title,
                      scope.row.is_supplier,
                      scope.row
                    )
                  " type="primary">编辑</el-button>

                <!-- <el-button :loading="$store.state.isLoading" size="mini" @click="showCollectDialog(scope.row.id)">收款信息</el-button> -->
                <el-dropdown @command="handleCommand" class="user-button">
                  <el-button type="primary" plain size="mini">
                    收款信息
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="toObj(scope.row, '收款信息zfb')">支付宝收款</el-dropdown-item>
                    <el-dropdown-item :command="toObj(scope.row, '收款信息wx')">微信收款</el-dropdown-item>
                    <el-dropdown-item :command="toObj(scope.row, '收款信息bank')">银行卡收款</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button :loading="$store.state.isLoading" size="mini" @click="resetShEwm(scope.row.id)">商户二维码</el-button>
                <el-button :loading="$store.state.isLoading" size="mini" @click="toShop(scope.row.id, scope.row.nickname)">商户商品</el-button>
                <el-button :loading="$store.state.isLoading" size="mini" @click="toOrder(scope.row.id, scope.row.nickname)">商户订单</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <!-- <UserEdit @parent="reload" :show.sync="show_user" :editId="editId" :clickNum="clickNum_user"></UserEdit> -->
    <!--编辑会员-->
    <CollectionsEdit :nowsel="collectionsel" @parent="reload" :show.sync="show" :editId="editId" :clickNum="clickNum"></CollectionsEdit>
    <!--收款信息-->
    <RatingEdit @parent="reload" :show.sync="show_rating" :editId="editId" :clickNum="clickNum_rating"></RatingEdit>
    <!--设等级-->
    <RechargeEdit @parent="reload" :show.sync="show_recharge" :editId="editId" :clickNum="clickNum_recharge" :editUser="editUser"></RechargeEdit>
    <!--充值-->
    <ChangetidEdit @parent="reload" :show.sync="show_changetid" :editId="editId" :clickNum="clickNum_changetid" :editUser="editUser"></ChangetidEdit>
    <!--修改推荐人-->
    <LetterEdit @parent="reload" :show.sync="show_letter" :editId="editId" :clickNum="clickNum_letter" :editUser="editUser"></LetterEdit>
    <!--发送站内信-->
    <WxewmEdit @parent="reload" :show.sync="show_wxewm" :editId="editId" :clickNum="clickNum_wxewm" :editUser="editUser"></WxewmEdit>
    <!--微信二维码-->
    <WyewmEdit @parent="reload" :show.sync="show_wyewm" :editId="editId" :clickNum="clickNum_wyewm" :editUser="editUser"></WyewmEdit>
    <!--网页二维码-->
    <ShewmEdit @parent="reload" :show.sync="show_shewm" :editId="editId" :clickNum="clickNum_shewm" :editUser="editUser"></ShewmEdit>
    <!--网页二维码-->

    <el-dialog :close-on-click-modal="false" title="供应商" :modal-append-to-body="false" :visible.sync="show_supplier" class="tl size_13" width="800px">
      <SupplierUpdate v-if="show_supplier" :row="row" ref="supplier_update" @openThis="getOpenThis"></SupplierUpdate>
    </el-dialog>
    <!--编辑与加入供应商-->
  </div>
</template>
<script>
import CollectionsEdit from "@/components/user/collections_edit.vue"; //收款信息
import UserEdit from "@/components/user/user_edit.vue"; //编辑会员
import RatingEdit from "@/components/user/user_rating.vue"; //设等级
import RechargeEdit from "@/components/user/user_recharge.vue"; //充值
import ChangetidEdit from "@/components/user/user_changetid.vue"; //修改推荐人
import LetterEdit from "@/components/user/user_letter.vue"; //发送站内信
import WxewmEdit from "@/components/user/user_wxewm.vue"; //微信二维码
import WyewmEdit from "@/components/user/user_wyewm.vue"; //网页二维码
import ShewmEdit from "@/components/user/user_shewm.vue"; //商户二维码

import SupplierUpdate from "@/components/user/SupplierUpdate.vue"; //编辑与加入供应商
import { userSupplierSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  data () {
    return {
      collectionsel: "",
      userSearchData: userSupplierSearchData,
      show: false,
      show_user: false,
      show_rating: false,
      show_recharge: false,
      show_changetid: false,
      show_letter: false,
      show_wxewm: false,
      show_wyewm: false,
      show_shewm: false,
      show_supplier: false,
      loading: false,
      list: [],
      allPage: 0,
      allNum: 0,
      pageSize: 10,
      currentPage: 1,
      editId: "",
      editUser: "",
      realname: "",
      shoptitle: "",
      isSupplier: "",
      multipleSelection: "",
      arr: [],
      visible: false,
      clickNum: 0,
      updataIndex: "",
      clickNum_user: 0,
      clickNum_rating: 0,
      clickNum_recharge: 0,
      clickNum_changetid: 0,
      clickNum_letter: 0,
      clickNum_wxewm: 0,
      clickNum_wyewm: 0,
      clickNum_shewm: 0,
      clickNum_supplier: 0,
      searchAll: {},
      row: {}
    };
  },
  components: {
    CollectionsEdit,
    UserEdit,
    RatingEdit,
    RechargeEdit,
    ChangetidEdit,
    LetterEdit,
    WxewmEdit,
    WyewmEdit,
    ShewmEdit,
    SupplierUpdate
  },
  methods: {
    handleCommand (command) {
      var str = command.commandStr;
      switch (str) {
        case "收款信息zfb":
          this.collectionsel = "zfb";
          this.showCollectDialog(command.id);
          break;
        case "收款信息wx":
          this.collectionsel = "wx";
          this.showCollectDialog(command.id);
          break;
        case "收款信息bank":
          this.collectionsel = "bank";
          this.showCollectDialog(command.id);
          break;
        default:
          break;
      }
    },
    toObj (obj, str) {
      obj = obj || {};
      obj.commandStr = str;
      return JSON.parse(JSON.stringify(obj));
    },
    getOpenThis () {
      this.show_supplier = false;
      console.log(1111);
      this.getNewsAll(this.searchAll);
    },
    toShop (sid, nickname) {
      this.$store.commit("addbreadcrumbs", {
        title: "商户商品",
        url: `/index/supplier/suppliershops?sid=${sid}&nickname=${nickname}`
      });
      this.$router.push({
        path: "/index/supplier/suppliershops",
        query: { sid, nickname }
      });
    },
    toOrder (sid, nickname) {
      this.$store.commit("addbreadcrumbs", {
        title: "商户商品",
        url: `/index/supplier/supplierorder?sid=${sid}&nickname=${nickname}`
      });
      this.$router.push({
        path: "/index/supplier/supplierorder",
        query: { sid, nickname }
      });
    },
    isHasImg (pathImg) {
      var ImgObj = new Image();
      ImgObj.src = pathImg;
      if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
        return true;
      } else {
        return false;
      }
    },
    getUserInfo (id, cate_id, ti) {
      this.$store.commit("addbreadcrumbs", {
        title: "用户详情",
        url: `/index/user/user_info?id=${id}&cate_id=${cate_id}&title=${ti}`
      });
      this.$router.push({
        path: "/index/user/user_info",
        query: { id: id, cate_id: cate_id, title: ti }
      });
    },
    imgError (item) {
      if (!item) {
        return require("../../assets/img/default_head.png");
      }
      if (item.indexOf("http") >= 0) {
        return item;
      } else {
        return "/api/" + item;
      }
    },
    getSearch (obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    getNewsAll (data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      this.$api.getUser.userSupplierList(params).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange (val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
    handleSwitch (val, id) {
      //审核
      var params = {};
      params["id"] = id;
      val == true ? (params["show"] = 1) : (params["show"] = 0);
      this.$api.getUser.userlock(params).then(res => {
        // this.getNewsAll();
      });
    },
    handleSelectionChange (val) {
      //多选框赋值
      this.multipleSelection = val;
    },
    delSelection () {
      //删除
      this.$swal({
        title: "您确定要删除选中信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var str = "";
          for (var i in this.multipleSelection) {
            str += this.multipleSelection[i].id + "@";
          }
          str = str.slice(0, -1);
          var data = { id_str: str };
          this.$api.getUser.userDel(data).then(res => {
            if (res.data.code == 200) {
              this.getNewsAll(this.searchAll);
            }
          });
        }
      });
    },
    deleteNew (index, id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { id_str: id };
          this.$api.getUser.userDel(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");

              this.getNewsAll(this.searchAll);
            } else {
              this.$swal("删除失败！", "出错啦！", "success");
            }
          });
        }
      });
    },
    resetPassword (id, username) {
      this.$swal({
        title: "确认后当前会员的密码将会重置",
        text: "请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "确认，我要重置",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { username: username, id: id };
          this.$api.getUser.userResetPassword(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("新密码为" + res.data.result, "重置成功！", "success");
            } else {
              this.$swal("重置失败！", "出错啦！", "success");
            }
          });
        }
      });
    },
    resetPayPassword (id, username) {
      this.$swal({
        title: "当前会员的支付密码将会重置",
        text: "请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "确认，我要重置",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { username: username, id: id };
          this.$api.getUser.userResetPayPassword(data).then(res => {
            if (res.data.code == 200) {
              this.$swal(
                "重置支付密码为" + res.data.result,
                "重置成功！",
                "success"
              );
            } else {
              this.$swal("重置失败！", "出错啦！", "success");
            }
          });
        }
      });
    },
    resetEwm (id, username) {
      this.$swal({
        title: "如果您确认后，当前会员的二维码会清空，会员可以重新获取",
        text: "请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "确认，我要重置",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { username: username, id: id };
          this.$api.getUser.userResetEwm(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("该会员二维码已清空", "重置成功！", "success");
            } else {
              this.$swal("重置失败！", "出错啦！", "success");
            }
          });
        }
      });
    },
    resetShEwm (id) {
      this.show_shewm = true;
      this.editId = id;
      this.clickNum_shewm++;
    },
    resetWxEwm (id) {
      this.show_wxewm = true;
      this.editId = id;
      this.clickNum_wxewm++;
    },
    resetWyEwm (id) {
      this.show_wyewm = true;
      this.editId = id;
      this.clickNum_wyewm++;
    },
    showCollectDialog (id) {
      this.show = true;
      this.editId = id;
      this.clickNum++;
    },
    showEditDialog (id) {
      this.show_user = true;
      this.editId = id;
      this.clickNum_user++;
    },
    showRatingDialog (id) {
      this.show_rating = true;
      this.editId = id;
      this.clickNum_rating++;
    },
    showRechargeDialog (id, u_name) {
      this.show_recharge = true;
      this.editId = id;
      this.editUser = u_name;
      this.clickNum_recharge++;
    },
    showchangetidDialog (id, u_name) {
      this.show_changetid = true;
      this.editId = id;
      this.editUser = u_name;
      this.clickNum_changetid++;
    },
    showLetterDialog (id, u_name) {
      this.show_letter = true;
      this.editId = id;
      this.editUser = u_name;
      this.clickNum_letter++;
    },
    showSupplierDialog (id, u_name, name, shop_title, is_supplier, row) {
      this.$api.getUser.getSupplierInfoEdit({ id }).then(res => {
        if (res.data.code == 200) {
          // this.row=res.data.result;

          this.$set(this, "row", res.data.result);

          this.show_supplier = true;
          console.log(this.row);
        }
      });
    },
    reload (id) {
      this.getNewsAll(this.searchAll);
    }
  },
  beforeCreate () { },
  created () {
    this.getNewsAll();
  },
  computed: {}
};
</script>

<style lang="less" scoped>
.myblank button {
  margin: 5px 5px 0 0;
}
</style>
